<template>
	<view>
		<nav-bar color="#000000" bgc="#ffffff" bbtn v-if="this.jumpType==1">新增地址</nav-bar>
		<nav-bar color="#000000" bgc="#ffffff" bbtn v-if="this.jumpType==2">修改地址</nav-bar>
		<view class="section-1">
			<view class="name">
				<view class="text">姓名:</view>
				<view class="input" v-model="name"><input type="text" value="" placeholder="请输入姓名" v-model="name" /></view>
			</view>
			<view class="tel">
				<view class="text" v-model="mobile">电话</view>
				<view class="input"><input type="number" value="" placeholder="收货人手机号" maxlength="11" v-model="mobile" /></view>
			</view>
			<view class="province">
				<view class="text">地区:</view>
				<pickerAddress style="float: right;color: #AAAAAA;" @change="change" class="selpickerAddress">{{ txt }}</pickerAddress>
				<view class="img-1"><image src="../../static/image/follow/lALPGoU8blkV3q8bGw_27_27.png" mode=""></image></view>
			</view>
			<view class="address">
				<view class="text">地址:</view>
				<view class="input"><input type="text" value="" placeholder="街道门牌、楼层等信息" v-model="address" /></view>
			</view>
			<view class="is_default">
				<view class="text">设为默认收货地址</view>
				<view class="img-2" @click="isDefault" :class="{ imgShow: this.is_default === 1 }"></view>
			</view>
			<view class="section-2">
				<view class="submitBtn" @click="goToAddress">保存</view>
			</view>
			<view class="section-4" v-if="this.jumpType==2">
				<view class="deleteBtn" @click="deleteAddress">删除</view>
			</view>
		</view>
        <dialogview v-show="dialogFlag" @cancel="cancel" @confirm="confirm" :param="dialogView"></dialogview>
	</view>
</template>

<script>
import dialogview from "../../components/dialogView.vue"
import pickerAddress from '../../components/pickerAddress/pickerAddress.vue';
export default {
	data() {
		return {
			
			name: '',
			mobile: '',
			address: '',
			is_default: 0,
			txt: '请选择省/市/区',
			id: '',
			modalShow: false, //删除框弹出
			dialogView:{
				style:0,  // 弹出框的样式： 0 1 2
				title:'提示',//弹出层的标题
				content:'确定要这样做吗确定要这样做吗确定要这样做吗确定要这样做吗？',//弹出层的内容
				cancelText:'取消',//取消按钮的文本
				confirmText:'确认',//确认按钮的文本
				data:{code:1000}
			},
			dialogFlag:false,
			preInfo:{}
		};
	},
	components: {
		pickerAddress,
		dialogview
	},
	onLoad: function(option) {
		this.jumpType = option.jumpType
        if(this.jumpType==1){//新增地址
			
		}else{//编辑地址
		    this.preInfo = JSON.parse(decodeURIComponent(option.addressInfo));
			console.log(this.preInfo)
			this.name = this.preInfo.name
			this.mobile = this.preInfo.mobile
			this.province = this.preInfo.province
			this.txt = this.preInfo.province
			this.address = this.preInfo.address
			this.is_default = this.preInfo.is_default
		}
	},

	methods: {
		//地址选择组件
		change: function(data) {
			console.log(data);
			this.txt = data.data.join('/');
			this.province = data.data[0];
			this.city = data.data[1];
			this.area = data.data[2];
		},
		//判断是否默认
		isDefault: function() {
			if(this.is_default===1){
				this.is_default=2
			}else{
				this.is_default=1
			}
		},
		confirm:function(){
			
		},
		operatSuccess:function(){
			uni.navigateBack({})
		},
		//保存地址
		goToAddress: function() {
			if (!this.name) {
				uni.showToast({
					title: '请填写姓名',
					icon: 'none',
					duration: 2000
				});
				return false;
			}
			if (!/^1[3456789]\d{9}$/.test(this.mobile)) {
				uni.showToast({
					title: '手机号码有误，请重填',
					icon: 'none',
					duration: 2000
				});
				return false;
			}
			if (this.txt == '请选择省/市/区') {
				uni.showToast({
					title: '请选择地址信息',
					icon: 'none',
					duration: 2000
				});
				return false;
			}
			if (!this.address || this.address.length < 4) {
				uni.showToast({
					title: '请填写正确的详细地址(至少4个字)',
					icon: 'none',
					duration: 2000
				});
				return false;
			} 
				//没有地址id新增地址保存
				if (!this.preInfo.id) {
					let _this = this
					let param = {
						token: this.token,
						name: this.name,
						mobile: this.mobile,
						province: this.txt,
						address: this.address,
						is_default: this.is_default
					};
				this.ajaxJson('addAddress',param,function(data){
					_this.dialogView={
						style:2,  // 弹出框的样式： 0 1 2
						title:'提示',//弹出层的标题
						content:'地址添加成功',//弹出层的内容
						cancelText:'',//取消按钮的文本
						confirmText:'确认',//确认按钮的文本
						data:{}
					},
					_this.confirm = _this.operatSuccess
                    _this.dialogFlag = true;
				})
				} 
				//有地址id，修改地址保存
				else {
					let _this = this
					let param = {
						token: this.token,
						id:this.preInfo.id,
						name: this.name,
						mobile: this.mobile,
						province: this.txt,
						address: this.address,
						is_default: this.is_default
					};
				 this.ajaxJson('editAddress',param,function(data){
					_this.dialogView={
						style:2,  // 弹出框的样式： 0 1 2
						title:'提示',//弹出层的标题
						content:'地址编辑成功',//弹出层的内容
						cancelText:'',//取消按钮的文本
						confirmText:'确认',//确认按钮的文本
						data:{}
					},
					_this.confirm = _this.operatSuccess
                    _this.dialogFlag = true;
				})
				}

		},
		//删除地址
		deleteAddress: function() {
			this.dialogView={
				style:1,  // 弹出框的样式： 0 1 2
				title:'提示',//弹出层的标题
				content:'确定要删除当前收货地址',//弹出层的内容
				cancelText:'取消',//取消按钮的文本
				confirmText:'确认',//确认按钮的文本
				data:this.preInfo.id//需要操作的数据
			},
			this.confirm = this.deleteConfirm
			this.dialogFlag = true;
		},
		//确认删除
		deleteConfirm: function(id) {
			let _this = this
				let param = {
					token: this.token,
					id:id,
				};
			 this.ajaxJson('delAddress',param,function(data){
				_this.dialogView={
					style:2,  // 弹出框的样式： 0 1 2
					title:'提示',//弹出层的标题
					content:'地址删除成功',//弹出层的内容
					cancelText:'',//取消按钮的文本
					confirmText:'确认',//确认按钮的文本
					data:{}
				},
				_this.confirm = _this.operatSuccess
			    _this.dialogFlag = true;
			})
		},
		cancel:function(){//弹出框取消
			this.dialogFlag = false;
		},
		//取消删除
		cancelDelete: function() {
			this.modalShow = false;
		},
	}
};
</script>
<style lang="scss">
	* {
		padding: 0;
		margin: 0;
		font-size: 0.75rem;
		box-sizing: border-box;
	}
	page{
		background-color: #FFFFFF;
	}
.section-1 {
	width: 90%;
	min-height: 1100rpx;
	margin: 100rpx auto 50rpx;
	padding: 30rpx;
	background-color: #ffffff;
	border-radius: 20rpx;
	box-shadow: 0rpx 0rpx 20rpx 2rpx #AAAAAA ;
	// border: 1px red solid;
	.name,
	.tel,
	.province,
	.address,
	.is_default {
		padding: 30rpx 0;
		display: flex;
		flex-direction: flex-start;
		align-items: center;
		// border-bottom: 1px solid #e5e5e5;
		// border: 1px red solid;
		.text {
			margin-right: 30rpx;
		}
	}
	.province {
		width: 100%;
		// border: 1px red solid;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		.selpickerAddress {
			width: 80%;
			// border: 1px red solid;
		}
		.img-1 {
			width: 20rpx;
			height: 30rpx;
			// margin-left: auto;
			image {
				width: 100%;
				height: 100%;
			}
		}
	}
	.is_default {
		.img-2 {
			width: 100rpx;
			height: 60rpx;
			margin-left: auto;
			background: url(../../static/image/address/icon_guaa@3x.png);
			background-size: 100% 100%;
		}
		.imgShow {
			background: url(../../static/image/address/icon_kaii@3x.png);
			background-size: 100% 100%;
		}
	}
}
.section-2 {
	.submitBtn {
		width: 80%;
		margin: 0 auto;
		height: 80rpx;
		color: #ffffff;
		background: linear-gradient(to right, #FD6431, #FF9972);
		border-radius: 20rpx;
		text-align: center;
		align-items: center;
		line-height: 80rpx;
		margin-top: 50rpx;
	}
}
.section-3 {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	background-color: rgba(0, 0, 0, 0.5);
	.modal {
		width: 75%;
		height: 290rpx;
		background-color: #ffffff;
		position: fixed;
		top: 40%;
		left: 50%;
		border-radius: 10rpx;
		transform: translate(-50%, -50%);
		display: flex;
		flex-direction: column;
		align-items: center;
		.title {
			color: #666666;
			font-size: 40rpx;
			margin-top: 30rpx;
		}
		.content {
			width: 70%;
			margin-top: 40rpx;
			text-align: center;
		}
		.submitBtn {
			width: 100%;
			margin-top: 40rpx;
			border-top: 1px red solid;
			display: flex;
			border-top: 1px #e5e5e5 solid;
			padding: 10rpx 0;
			.btn1 {
				text-align: center;
				width: 50%;
				height: 100%;
				font-size: 40rpx;
				color: #999999;
				border-right: #e5e5e5 1px solid;
			}
			.btn2 {
				text-align: center;
				width: 50%;
				height: 100%;
				font-size: 40rpx;
				color: #ff3536;
			}
		}
	}
}
.section-4 {
	.deleteBtn {
		width: 80%;
		margin: 0 auto;
		height: 80rpx;
		color: #000000;
		border: 1px #AAAAAA solid;
		border-radius: 20rpx;
		text-align: center;
		align-items: center;
		line-height: 80rpx;
		margin-top: 50rpx;
		color: #aaa;
	}
}
</style>
